<template>
    <div class="card container contactus">
        <div class="chating_field card-list-scrollable" style="max-height: 600px;">
            <div v-for="a_chating_record in chating_record" :key="a_chating_record.id">
                <div>
                    <!-- <span><img :src="a_chating_record.user_photo" alt=""></span> -->
                    <span>{{ a_chating_record.content }}</span>
                </div>
            </div>
        </div>
        <div class="typing">
            <div class="mb-3">
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" v-model="chating_message"></textarea>
                <button type="button" class="btn btn-success send_btn" @click="to_write_message">发送</button>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
export default {
name: 'ContactUsView',
    setup() {
        const chating_message = ref('');
        const store = useStore();
        const chating_record = ref([]);

        $.ajax({
            url: "http://47.121.28.202:8000/settings/chating/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            data: {
                user_id: store.state.user.id,
                other_id: 7,
            },
            success(resp) {
                chating_record.value = resp;
            }
        })

        const to_write_message = () => {
            const messageToSend = chating_message.value;
            const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
            $.ajax({
                url: "http://47.121.28.202:8000/settings/chating/",
                type: "POST",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    content: chating_message.value,
                    user_id: store.state.user.id,
                    chating_time: currentTime,
                    user_photo: store.state.user.photo,
                    user_username: store.state.user.username,
                    other_id: 7,
                    username: store.state.user.username,
                },
                success() {
                    chating_message.value = '';
                    const ws = new WebSocket('ws://47.121.28.202:8000/ws/chatingsocket/');
                    ws.onopen = () => {
                        console.log("触发了聊天函数");
                        ws.send(JSON.stringify({
                            'message': messageToSend,
                            'user_id': store.state.user.id,
                        }))
                    }
                    ws.onmessage = (e) => {
                        const message = JSON.parse(e.data);
                        console.log(message);
                    }
                    console.log(store.state.user.photo);
                    $.ajax({
                        url: "http://47.121.28.202:8000/settings/chating/",
                        type: "GET",
                        headers: {
                            'Authorization': "Bearer " + store.state.user.access,
                        },
                        data: {
                            user_id: store.state.user.id,
                            other_id: 7,
                        },
                        success(resp) {
                            for (let i of resp) {
                                let is_have = false;
                                for (let j of chating_record.value) {
                                    if (i.id === j.id) {
                                        is_have = true;
                                    }
                                }
                                if (is_have === false) {
                                    chating_record.value.push(i);
                                }
                            }
                        }
                    })
                }
            })
        }
        return {
            chating_message,
            to_write_message,
            chating_record
        }
    }
}
</script>

<style scoped>
.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container {
    max-width: 1300px;
}
.card-list-scrollable {
    overflow-y: auto;
    border-radius: 5px;
    height: 600px;
}
.contactus {
    height: 650px;
}
.send_btn {
    float: right;
    margin-bottom: 10px;
    margin-top: 10px;
}
</style>